<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/jiazai.css">
    <title>登录</title>
    <style type="text/css">
    	html{
    		/*width: 100vw;*/
    		height: 100vh;
    		overflow: hidden;
    	}
    	body{
    		width: 100%;
    		height: 100%;
    		overflow: hidden;
    		background: url(img/login-bg.png) no-repeat center center fixed;
    		background-size: 100% 100%;
    	}
    	.logo{
    		margin-top: 15vh;
    	}
    	.logo>img{
    		width: 110px;
    		height: auto;
    	}
    	.input-wrap{
    		margin-top:6vh ;
    		padding: 0 40px;
    	}
    	.input{
    		margin-top: 25px;
    		background: #06476D;
    		border: 1px solid #1E5673;
    		border-radius: 6px;
    	}
    	.input>img{
    		margin-left: 15px;
    		margin-right: 15px;
    		width: 30px;
    		height: 30px;
    	}
    	.input>div{
    		padding:8px 18px;
    		border-left: 1px solid #1E5673;
    	}
    	.input>div>input{
    		width: 100%;
    		height: 20px;
    		line-height: 20px;
    		padding: 10px 0 ;
    		font-size: 16px;
    		color: white;
    		background: #06476D;
    	}
    	.input>div>input::-webkit-input-placeholder{
    		font-size: 16px;
    		color: rgba(231, 231, 230, .5);
    	}
    	.btn-wrap{
    		padding:4vh 40px;
    	}
    	.btn-wrap>p{
    		width: 100%;
			padding: 16px 0;
    		border-radius: 6px;
    		background: #6691B3;
			font-size: 18px;
			text-align: center;
    		color: white;
    	}
    	.forget-pas{
    		text-align: center;
    		font-size: 15px;
    		color: white;
    	}
    </style>
</head>

<body>
    <div id='app'>

        <!-- 加载中动画 -->
        <div id='jiazai-ani' v-if='jiazai'>
            <div class="arc"></div>
            <h1><span>LOADING</span></h1>
        </div>
        <!-- 加载中动画 -->

		<div class="logo dis-cen">
			<img src="img/ai-log.png"/>
		</div>
		
		<div class="input-wrap">
			<div class="input dis-start">
				<img src="img/user-icon.svg"/>
				<div class='input-info'>
					<input type="text" placeholder="输入您的手机号" v-model='user.account' maxlength="11"/>
				</div>
			</div>
			
			<div class="input dis-start">
				<img src="img/pas-icon.svg"/>
				<div class='input-info'>
					<input type="password" placeholder="输入您的登录密码" v-model='user.password' maxlength="20" style="background: #06476D;"/>
				</div>
			</div>
		</div>
		
		<div class="btn-wrap">
			<p @tap='goLogin'>登录</p>
			<p style="margin-top: 30px;" @tap="reg">注册</p>
		</div>
		<p class='forget-pas' @tap="forget">忘记密码</p>
    </div>
    <script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        var app = new Vue({
            el: '#app',
            data: {
                //加载动画
                jiazai: false,
                //登录信息
                user:{
                	account:'',
                	password:''
                }
            },
            created: function() {

            },
            methods: {
            	//注册
               reg:function(){
				    var op = {
				        'backButtonAutoControl': 'close', //返回是关闭当前页
				        'animationOptimization': 'none', //不优化
				        popGesture: 'close'
				    };
				    this.jiazai = true;
				    var This=this;
				    var web = plus.webview.create('regiset.html', 'regiset', op);
				    web.addEventListener("loaded", function() {
				        setTimeout(function() {
				            This.jiazai = false;
				            web.show('slide-in-right');
				        }, 200);
				    }, false);
               },
               //忘记密码
               forget:function(){
               		var op = {
				        'backButtonAutoControl': 'close', //返回是关闭当前页
				        'animationOptimization': 'none', //不优化
				        popGesture: 'close'
				    };
				    this.jiazai = true;
				    var This=this;
				    var web = plus.webview.create('forget-pas.html', 'forgetPas', op);
				    web.addEventListener("loaded", function() {
				        setTimeout(function() {
				            This.jiazai = false;
				            web.show('slide-in-right');
				        }, 200);
				    }, false);
              },
              //登录
              goLogin:function(){
					if(!_checkMobile(this.user.account)){
						_toast('请输入正确的手机号');
						return;
					}
					if(!this.user.password){
						_toast('请输入登录密码');
						return;
					}
					var This=this;
            		This.jiazai=true;
            		HTTP.post(LOGIN,this.user,function(data){
            			This.jiazai=false;
						if(String(data.status)=='1'){
							_toast('登录成功');
							var user={
								//邀请码
								invitation:data.invitation,
								//0：没激活   1：激活
								avtivation:data.avtivation,
								//账户
								phone:This.user.account,
								//账户session
								session:data.token,
								//是否绑定交易所账户   true:绑定    false：没绑定
								isbindApi:data.isbindApi,
								//登录密码
								password:This.user.password
							};
							localStorage.setItem('ai_user',JSON.stringify(user));
							var web=plus.webview.getLaunchWebview()
							web.evalJS("login()");
							web.show();
						}else{
							_toast(data.msg);
						}
					});
              }
            }
        });
        
        var first = null;
		mui.back = function() {
			//首次按键，提示‘再按一次退出应用’
			if(!first) {
				first = new Date().getTime();
				plus.nativeUI.toast("再按一次退出程序");
				setTimeout(function() {
					first = null;
				}, 1000);
			} else {
				if(new Date().getTime() - first < 1000) {
					plus.runtime.quit();
				} 
			}
		};
       
    </script>
</body>

</html>